<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0077)http://221.226.58.230:8024/WebSite/Branch/RealInformation/Data/DataChart.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	 <link href="<%=request.getContextPath() %>/css/SonPage.css" rel="stylesheet" type="text/css">
    <link href="<%=request.getContextPath() %>/css/Element.css" rel="stylesheet" type="text/css">
    <script src="<%=request.getContextPath() %>/js/echarts.common.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath() %>/js/Mtopt_1.1.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath() %>/js/SonPage.js" type="text/javascript"></script>
     <script src="js/shouye.js" type="text/javascript"></script>
    <link href="<%=request.getContextPath() %>/css/easyui.css" rel="stylesheet" type="text/css">
    <link href="<%=request.getContextPath() %>/css/icon.css" rel="stylesheet" type="text/css">
    <script src="<%=request.getContextPath() %>/js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath() %>/js/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath() %>/js/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath() %>/js/highcharts.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath() %>/js/grid.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath() %>/js/exporting.js" type="text/javascript"></script>
    <link href="<%=request.getContextPath() %>/css/DayReport.html.css" rel="stylesheet">
	<script>          
        function selectDefault(){
        	var df=$("#Sel_Area").val();  
        	$.ajax({
        		url:"<%=basePath%>qiyeServlet",
        		type:"post",
        		data:{"default":df},
        		success:function(data){
        			$("#SeltPolluteSource").html(data);
        		},
        		error:function(){
        			alert("error");
        		}
        	});
        }
        function selectOutlet(){
        	var outlet=$("#SeltPolluteSource").val();
        	$.ajax({
        		url:"<%=basePath%>chatouServlet",
        		type:"post",
        		data:{"outlet":outlet},
        		success:function(data){
        			$("#SeltDischargePort").html(data);
        		},
        		error:function(){
        			alert("error");
        		}
        	});
        }
        
    </script>
   
</head>
<body>
	<div class="DivSearchSource"
		style="width: 1180px; height: 28px; background-color: #E1E1E1;">
		<table cellpadding="0" cellspacing="0"
			style="display: none; width: 100%; height: 100%;">
			<tbody>
				<tr>
					<!-- <td><label class="LabelMain" style="padding-left: 5px;">
							实时图表:</label><label id="LblSignInfo">载入中...</label> <input
						id="TxtDataSum" type="text" style="display: none" value="20"
						data-options="min:15,max:120,required:true"> <input
							id="TxtRefreshTime" type="text" style="display: none" value="10"
							data-options="min:5,max:120,required:true"> <input
								id="BtnSetInterval" type="button" style="display: none"
								value="开启刷新">&nbsp; </td> -->
				</tr>
			</tbody>
		</table>
		<form method="post" action="<%=request.getContextPath()%>/chartServlet">
		<table cellpadding="0" cellspacing="0"
			style="width: 100%; height: 100%;">
			<tbody>
				<tr>
					<td><label class="LabelMain" style="padding-left: 5px;">区域:</label>
						<select class="SelectDefault" id="Sel_Area" name="Sel_Area"
						style="width: 115px" onchange="selectDefault()">
							<option value="小店区">小店区</option>
							<option value="迎泽区">迎泽区</option>
							<option value="杏花岭区">杏花岭区</option>
							<option value="尖草坪区">尖草坪区</option>
							<option value="万柏林区">万柏林区</option>
							<option value="晋源区">晋源区</option>
					</select> <label class="LabelMain" style="padding-left: 5px;">企业:</label> <select
						class="SelectDefault" id="SeltPolluteSource"
						name="SeltPolluteSource" style="width: 220px"
						onchange="selectOutlet()">
							<option value="0">请选择企业</option>

					</select> <label class="LabelMain" style="padding-left: 5px;">排放口:</label> <select
						class="SelectDefault" id="SeltDischargePort"
						name="SeltDischargePort" style="width: 115px">

							<option value="0">请选择排放口</option>
					</select> <label class="LabelMain" style="padding-left: 5px;">因子:</label> <select
						class="SelectDefault" id="Sel_Item" name="diviosr" style="width: 100px">

							<option value="油烟浓度" 
								>油烟浓度</option>
							<option value="联动比"  >联动比</option>
							<option value="温度"  >温度</option>
							<option value="湿度" >湿度</option>
							<option value="压力" >压力</option>
					</select> <!-- <label class="LabelMain" style="padding-left: 5px;">时间:</label> <input
						id="TxtSearchDataTime" type="text"
						class="easyui-datebox datebox-f combo-f"
						style="width: 90px; display: none;"> <span
							class="combo datebox" style="width: 88px; height: 20px;"
							value="2017-01-18"> <input type="text"
								class="combo-text validatebox-text" autocomplete="off"
								style="width: 66px; height: 20px; line-height: 20px;"> <span>
                    		<span class="combo-arrow" style="height: 20px;"></span>
                    	</span>
                    	<input type="hidden" class="combo-value" value="2017-01-18"></span> -->
							&nbsp; 
							<input id="BtnRefresh" class="ButtonMain" type="submit"
							value="生成图表"> <input id="BtnVisitDetail" type="button"
								class="ButtonMain" value="详细数据"> <input id="BtnBackPage"
									type="button" class="ButtonDefault" value="返回上层"></td>
					</tr>
				</tbody>
			</table>
		</form>

	</div>
	<!-- <div id="DivPollutantChart"  class="easyui-panel" title="流量图表" style="display:none;width: 1180px;
        height: 320px;">
    </div>-->
	<div class="panel"   style="display: block; width: 1180px;">
		<div class="panel-header" style="width: 1168px;">
			<div class="panel-title">污染物图表</div>
			<div class="panel-tool"></div>
		</div>
		<div id="div_Msg" class="easyui-panel panel-body" title="" style="width: 1108px; height: 521px;"></div> 
	</div>
	
	<script >
	var array_sum=new Array();
   	<c:forEach items="${list}" var="item" varStatus="status" >  
   		array_sum.push("${item.d_name}");
   	</c:forEach>
   	switch(array_sum[0])
   	{
   		case "油烟浓度":
   			oli_con();
   	 	 break;
   		case "联动比":
   			unit();
   	  	break;
   			default:
   	}

	function oli_con(){

		var myCharts=echarts.init(document.getElementById('div_Msg'));
		
		var array= new Array(); 
		var array_name=new Array();
	   	<c:forEach items="${list}" var="item" varStatus="status" >  
	    	   array.push("${item.oil_con}");
	    	   array_name.push("${item.d_name}");
	   	</c:forEach>
	   	
	   	var colors = ['#5793f3', '#d14a61', '#675bba'];
	   	option = {
	   	    color: colors,

	   	    tooltip: {
	   	        trigger: 'none',
	   	        axisPointer: {
	   	            type: 'cross'
	   	        }
	   	    },
	   	    legend: {
	   	        data:['2015'+array_name[0]]
	   	    },
	   	    grid: {
	   	        top:50,
	   	        bottom: 50
	   	    },
	   	    xAxis: [
	   	        {
	   	            type: 'category',
	   	            axisTick: {
	   	                alignWithLabel: true
	   	            },
	   	            axisLine: {
	   	                onZero: false,
	   	                lineStyle: {
	   	                    color: colors[2]
	   	                }
	   	            },
	   	            axisPointer: {
	   	                label: {
	   	                    formatter: function (params) {
	   	                        return array_name[0] + params.value
	   	                            + (params.seriesData.length ? '-' + params.seriesData[0].data : '');
	   	                    }
	   	                }
	   	            },
	   	            data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00','20:00', '21:00', '22:00', '23:00']
	   	        }
	   	    ],
	   	    yAxis: [
	   	        {
	   	            type: 'value'
	   	        }
	   	    ],
	   	    series: [
	   	        {
	   	            name:'2016'+array_name[0],
	   	            type:'line',
	   	            smooth: true,
	   	            data: [array[0], array[1],array[2],array[3], array[4],array[5],array[6], array[7],array[8],array[9], array[10],array[11],array[12], array[13],array[14],array[15], array[16],array[17],array[18],array[19], array[20],array[21],array[22], array[23]]
	   	        }
	   	    ]
	   	};
	myCharts.setOption(option);
	}
	
	function unit(){

var myCharts=echarts.init(document.getElementById('div_Msg'));
		
		var array= new Array(); 
		var array_name=new Array();
	   	<c:forEach items="${list}" var="item" varStatus="status" >  
	    	   array.push("${item.oil_con}");
	    	   array_name.push("${item.d_name}");
	   	</c:forEach>
	   	
	   	var colors = ['#5793f3', '#d14a61', '#675bba'];
	   	option = {
	   	    color: colors,

	   	    tooltip: {
	   	        trigger: 'none',
	   	        axisPointer: {
	   	            type: 'cross'
	   	        }
	   	    },
	   	    legend: {
	   	        data:['2015'+array_name[0]]
	   	    },
	   	    grid: {
	   	        top:50,
	   	        bottom: 50
	   	    },
	   	    xAxis: [
	   	        {
	   	            type: 'category',
	   	            axisTick: {
	   	                alignWithLabel: true
	   	            },
	   	            axisLine: {
	   	                onZero: false,
	   	                lineStyle: {
	   	                    color: colors[2]
	   	                }
	   	            },
	   	            axisPointer: {
	   	                label: {
	   	                    formatter: function (params) {
	   	                        return array_name[0] + params.value
	   	                            + (params.seriesData.length ? '-' + params.seriesData[0].data : '');
	   	                    }
	   	                }
	   	            },
	   	            data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00','20:00', '21:00', '22:00', '23:00']
	   	        }
	   	    ],
	   	    yAxis: [
	   	        {
	   	            type: 'value'
	   	        }
	   	    ],
	   	    series: [
	   	        {
	   	            name:'2016'+array_name[0],
	   	            type:'line',
	   	            smooth: true,
	   	            data: [array[0], array[1],array[2],array[3], array[4],array[5],array[6], array[7],array[8],array[9], array[10],array[11],array[12], array[13],array[14],array[15], array[16],array[17],array[18],array[19], array[20],array[21],array[22], array[23]]
	   	        }
	   	    ]
	   	};
	myCharts.setOption(option);
	}
	</script>
	
	<div id="DivChart" class="jGrowl bottom-left">
		<div class="jGrowl-notification"></div>
	<div class="panel combo-p"
		style="position: absolute; z-index: 10; display: none; width: 180px;">
		<div class="combo-panel panel-body panel-body-noheader" title="" id=""
			style="width: 178px; height: auto;">
			<div class="datebox-calendar-inner">
				<div class="calendar calendar-noborder"
					style="width: 0px; height: 178px;">
					<div class="calendar-header">
						<div class="calendar-prevmonth"></div>
						<div class="calendar-nextmonth"></div>
						<div class="calendar-prevyear"></div>
						<div class="calendar-nextyear"></div>
						<div class="calendar-title">
							<span>一月 2017</span>
						</div>
					</div>
					<div class="calendar-body" style="height: 156px;">
						<table cellspacing="0" cellpadding="0" border="0">
							<thead>
								<tr>
									<th>日</th>
									<th>一</th>
									<th>二</th>
									<th>三</th>
									<th>四</th>
									<th>五</th>
									<th>六</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td class="calendar-day calendar-other-month calendar-sunday"
										abbr="2016,12,25">25</td>
									<td class="calendar-day calendar-other-month" abbr="2016,12,26">26</td>
									<td class="calendar-day calendar-other-month" abbr="2016,12,27">27</td>
									<td class="calendar-day calendar-other-month" abbr="2016,12,28">28</td>
									<td class="calendar-day calendar-other-month" abbr="2016,12,29">29</td>
									<td class="calendar-day calendar-other-month" abbr="2016,12,30">30</td>
									<td class="calendar-day calendar-other-month calendar-saturday"
										abbr="2016,12,31">31</td>
								</tr>
								<tr>
									<td class="calendar-day calendar-sunday" abbr="2017,1,1">1</td>
									<td class="calendar-day" abbr="2017,1,2">2</td>
									<td class="calendar-day" abbr="2017,1,3">3</td>
									<td class="calendar-day" abbr="2017,1,4">4</td>
									<td class="calendar-day" abbr="2017,1,5">5</td>
									<td class="calendar-day" abbr="2017,1,6">6</td>
									<td class="calendar-day calendar-saturday" abbr="2017,1,7">7</td>
								</tr>
								<tr>
									<td class="calendar-day calendar-sunday" abbr="2017,1,8">8</td>
									<td class="calendar-day" abbr="2017,1,9">9</td>
									<td class="calendar-day" abbr="2017,1,10">10</td>
									<td class="calendar-day" abbr="2017,1,11">11</td>
									<td class="calendar-day" abbr="2017,1,12">12</td>
									<td class="calendar-day" abbr="2017,1,13">13</td>
									<td class="calendar-day calendar-saturday" abbr="2017,1,14">14</td>
								</tr>
								<tr>
									<td class="calendar-day calendar-sunday" abbr="2017,1,15">15</td>
									<td class="calendar-day" abbr="2017,1,16">16</td>
									<td class="calendar-day" abbr="2017,1,17">17</td>
									<td class="calendar-day calendar-today calendar-selected"
										abbr="2017,1,18">18</td>
									<td class="calendar-day" abbr="2017,1,19">19</td>
									<td class="calendar-day" abbr="2017,1,20">20</td>
									<td class="calendar-day calendar-saturday" abbr="2017,1,21">21</td>
								</tr>
								<tr>
									<td class="calendar-day calendar-sunday" abbr="2017,1,22">22</td>
									<td class="calendar-day" abbr="2017,1,23">23</td>
									<td class="calendar-day" abbr="2017,1,24">24</td>
									<td class="calendar-day" abbr="2017,1,25">25</td>
									<td class="calendar-day" abbr="2017,1,26">26</td>
									<td class="calendar-day" abbr="2017,1,27">27</td>
									<td class="calendar-day calendar-saturday" abbr="2017,1,28">28</td>
								</tr>
								<tr>
									<td class="calendar-day calendar-sunday" abbr="2017,1,29">29</td>
									<td class="calendar-day" abbr="2017,1,30">30</td>
									<td class="calendar-day" abbr="2017,1,31">31</td>
									<td class="calendar-day calendar-other-month" abbr="2017,2,1">1</td>
									<td class="calendar-day calendar-other-month" abbr="2017,2,2">2</td>
									<td class="calendar-day calendar-other-month" abbr="2017,2,3">3</td>
									<td class="calendar-day calendar-other-month calendar-saturday"
										abbr="2017,2,4">4</td>
								</tr>
							</tbody>
						</table>
						<div class="calendar-menu" style="display: none;">
							<div class="calendar-menu-year-inner">
								<span class="calendar-menu-prev"></span> <span> <input
									class="calendar-menu-year" type="text"></span> <span
									class="calendar-menu-next"></span>
							</div>
							<div class="calendar-menu-month-inner"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="datebox-button">
				<a href="javascript:void(0)" class="datebox-current">今天</a> <a
					href="javascript:void(0)" class="datebox-close">关闭</a>< /div>
			</div>
		</div>
</body>
 
</html>